<template>
  <!-- 问卷预览 -->
  <div class="questionnairePreview">
    <el-dialog :visible.sync="dialogVisible" width="80%" :before-close="closeDailog">
      <div class="questionnaire-container">
        <div class="ques-cont">
          <h1 class="ques-title">{{ formData.title }}</h1>
          <div v-if="formData.questionnaireSort===0" class="introduction_area">
            <p>{{ formData.startWords }}</p>
          </div>
          <div class="ques-subject-area">
            <div
              v-for="(chaper,index) in formData.questionnaireChapterDTOList"
              :key="index"
            >
              <p
                style="font-size:1.2rem;margin:0;font-weight:600"
              >{{ chaper.chapter_index_text+'、'+ chaper.chapterTitle }}</p>
              <Item
                v-for="(item,index1) in chaper.questionnaireQuestionDTOList"
                :key="index1"
                :item="item"
                :answer="answer"
                :list="chaper.questionnaireQuestionDTOList"
                type="1"
              ></Item>
            </div>
          </div>
          <div v-if="formData.questionnaireSort===0" class="introduction_area">
            <p>{{ formData.endWords }}</p>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Item from '../Item'
import { questionnaireDataSet } from '@/utils/questionnaire'
export default {
  name: 'QuestionnairePreview',
  components: {
    Item
  },
  data() {
    return {
      loading: false,
      answer: {},
      dialogVisible: false,
      formData: {
        endWords: '', // 结束语
        questionnaireSort: 0, // 问卷用途：0回访问卷1质检问卷
        remark: '', // 问卷备注或说明
        startWords: '', // 开场白
        state: 0, // 问卷状态：0未发布1已发布
        title: '', // 问卷标题
        id: '1',
        questionnaireChapterDTOList: []
      },
      formRules: {}
    }
  },
  methods: {
    closeDailog() {
      this.dialogVisible = false
    },
    openDailog(data) {
      this.resetData(data)
      this.dialogVisible = true
    },

    // 问卷信息处理
    resetData(data) {
      this.loading = true
      const obj = questionnaireDataSet(data, data.questionnaireChapterDTOList)
      this.answer = obj.answer
      this.loading = false
      this.formData = obj.questionnaire
      this.$forceUpdate()
    }
  }
}
</script>
<style lang='scss' scoped>
.questionnaire-container {
  background: #fff;
  position: relative;

  .ques-cont {
    padding: 0px 10px 20px;
    overflow-y: auto;
    .ques-title {
      text-align: center;
      font-weight: 400;
      letter-spacing: 5px;
    }
    .introduction_area {
      margin: 20px;
      padding: 10px;
      border: 1px solid #ccc;
      p {
        line-height: 26px;
      }
    }
  }
}
</style>
